<template>
    <div class="content_box">
        <customer-list class="customer_list" @selectCus="selectCus" :searchValue="searchValue" :orderBy="orderBy" :showType="1"></customer-list>
        <div class="order_list">
            <div class="quotationListHeader">
                <div class="tit">报价</div>
                <div style="float:right"><a J4onclick="addQuotation">新建</a></div>
                <!-- 状态筛选 -->
                <div class="filterBox" J4tpl="/getQuotationAttr" @change="getQuoDataAttr">
                    <div><input J4inout="s1101" type="checkbox" v-model="getQuoDataAttr.s1101"/>未使用</div>
                    <div><input J4inout="s1102" type="checkbox" v-model="getQuoDataAttr.s1102"/>等待客户确认</div>
                    <div><input J4inout="s9999" type="checkbox" v-model="getQuoDataAttr.s9999"/>已归档</div>
                </div>
                <!-- <div class="showAll">
                    <input type="checkbox" J4inout="/getQuotationAttr/showAll" J4onchange="getQuotationList"/>查看所有报价单
                </div> -->
            </div>
            <div class="quotationListView">
                <!-- 左侧订单列表 -->
                <ul class="quotation_list" v-infinite-scroll="getNextQuoList">
                    <!-- 订单 -->
                    <li class="quotation_item" v-for="quo in quotationList" :key="quo.id" :class="{active:quo.id == nowQuotation.id}" J4onclick="getQuotationData(orders_id,index)" J4data-quotationid="quotations_id" J4data-index="__id">
                        <p class="quotation_info">
                            <!-- 订单编号 -->
                            <span class="num_right">
                                <span class="client_num" J4value="__value/cus_uid"></span>
                                -
                                <span class="quotation_num" J4value="__value/order_uid"></span>
                            </span>
                            <!-- // 客户名称 -->
                            <span class="quotation_client"  J4value="__value/cus_name"></span>
                        </p>
                        <p class="quotation_name" J4value="__value/order_name"></p>
                        <p class="quotation_info2">
                            <!-- 销售人员 -->
                            <span class="quotation_sale" J4value="__value/cus_salename"></span>
                            <!-- 订单状态 -->
                            <span class="quotation_state">
                                <span J4if="Calc(a==1101,a=__value/order_status)" style="color: #CC0000;">未使用</span>
                                <span J4if="Calc(a==1102,a=__value/order_status)" style="color: gold;">等待对方确认</span>
                                <span J4if="Calc(a==9998,a=__value/order_status)" style="color: gray;">已取消</span>
                                <span J4if="Calc(a==9999,a=__value/order_status)" style="color: orange;">归档保存</span>
                            </span>
                        </p>
                        <div J4show="isUpdate" class="updateTip">该订单未保存</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import CustomerList from '@/components/CustomerList';

import {quotationApi} from '../../api'

export default {
    data(){
        return {
            searchValue:"",
            orderBy:"",
            getQuoDataAttr:{
                page:0,
                role:"self",
                s1101:true,
                s1102:true,
                s9999:true
            },
            nowCustomer:{},
            quotationList:[
                {}
            ],
            nowQuotation:{}
        }
    },
    components:{
        "customer-list":CustomerList
    },
    methods:{
        selectCus(cusInfo){
            console.log(cusInfo);

            this.nowCustomer = cusInfo;
            // 
            this.getCustomerQuoList();
        },
        getCustomerQuoList(){
            var getData = {
                ...this.getQuoDataAttr,
                customerid:this.nowCustomer.customers_id
            }

            quotationApi.getQuotationList(getData).then((res)=>{
                console.log(res);
            }).catch((err)=>{
                console.error(err);
            });
        },
        getNextQuoList(){

        }
    }
}
</script>

<style lang="less" scoped>
.content_box{
    .order_list{
        position: relative;
        width: 320px;
        height: 100%;
        background: #f7f7f7;
        overflow: auto;
        color: #444444;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom-color: rgba(0, 0, 0, 0.3);
        background-origin: border-box;
        background-image: -webkit-linear-gradient(right, #ffffff, #eeeeee);
        background-image: linear-gradient(to right, #ffffff, #eeeeee);
        .quotationListHeader {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 40px;
            display: inline-block;
            border-bottom: 1px solid rgba(0, 0, 0, 0.2);
            background: rgba(0, 0, 0, 0.1);
            padding: 0px 5px;
            line-height: 40px;
            >div{
                float: left;
            }
            .tit{
                font-size: 18px;
                font-weight: bold;
            }
            .searchBox{
                margin-top: 5px;
                margin-left: 5px;
                height: 30px;
                input{
                    height: 30px;
                    width: 160px;
                    border: none;
                }
                button{
                    width: 54px;
                    height: 30px;
                    border: none;
                    padding: 0px 2px;
                    outline: none;
                    background: tomato;
                    color: #fff;
                }
            }
            .filterBox{
                margin-left: 5px;
                div{
                    float: left;
                    input{
                        margin-top: 0px;
                        vertical-align: middle;
                    }
                }
            }
        }

        .quotationListView {
            // 左侧订单列表
            position: absolute;
            display: inline-block;
            left: 0;
            right: 0px;
            top: 40px;
            bottom: 0;
            background: rgb(250, 250, 250);
            padding: 0px;
            .quotation_list {
                overflow: auto;
                height: 100%;
                &.active{
                    height: 66%;
                }
                // 订单
                .quotation_item {
                    border: 1px solid #d2dae2;
                    background: #f5f6fa;
                    padding: 10px 20px;
                    cursor: pointer;
                    position: relative;
                    &:hover {
                        background: #dcdde1;
                    }

                    // 订单选中样式
                    &.active {
                        background: #2d2e36;
                        color: #dcdde1;

                        .quotation_info {
                            .quotation_client {
                                color: #dcdde1;
                            }
                        }

                        .quotation_name {
                            color: #fff;
                        }

                        .quotation_info2 {
                            .quotation_sale {
                                color: #dcdde1;
                            }
                        }
                    }

                    // 第一行 客户名以及编号
                    .quotation_info {
                        height: 26px;
                        line-height: 26px;

                        .num_right {
                            float: right;
                            color: #808e9b;
                        }

                        // 客户名称
                        .quotation_client {
                            font-size: 18px;
                            font-weight: bold;
                            color: #2d3436;
                            font-family: "雅黑";
                            letter-spacing: 2px;
                        }
                    }

                    // 订单名称
                    .quotation_name {
                        height: 30px;
                        line-height: 30px;
                        font-size: 14px;
                        font-weight: 600;
                        color: #718093;
                        text-align: right;
                    }

                    // 销售和订单状态
                    .quotation_info2 {

                        // 销售人员
                        .quotation_sale {
                            float: left;
                            color: #353b48;
                            font-weight: bold;
                        }

                        // 订单状态
                        .quotation_state {
                            float: right;
                            color: #0be881;
                        }
                    }

                    // 更新提示
                    .updateTip{
                            position: absolute;
                            right: 0px;
                        top: 5px;
                        background: #0be881;
                        color: #f5f6fa;
                    }
                }
            }
            .cusMarkBox{
                width: 100%;
                height: 34%;
                >div{
                    height: 100%;
                }
            }
        }
    }
}
</style>